<!doctype html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>图文详情</title>
    <meta name="description" content="图文详情">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="__PUBLIC__/assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="__PUBLIC__/assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="__PUBLIC__/assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="__PUBLIC__/assets/css/admin.css">
    <link rel="stylesheet" href="__PUBLIC__/assets/css/app.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/uploadify/uploadify.css"/>
    <link rel="stylesheet" href="__PUBLIC__/dist/amazeui.upload.css"/>
    <link rel="stylesheet" href="__PUBLIC__/Admin/MessageReply/news.css?<?php echo time(); ?>">
</head>

<body data-type="generalComponents">


<include file="./Public/common/htm/header.html"/>

<div class="tpl-page-container tpl-page-header-fixed" id="news_detail">
    <include file="./Public/common/htm/menu.html"/>
    <include file = "./Public/common/htm/pop_win.html"/>

    <div class="tpl-content-wrapper">
        <div class="tpl-content-page-title">
            文字回复列表
        </div>
        <ol class="am-breadcrumb">
            <li>
                <a href="#" class="am-icon-home">首页</a>
            </li>
            <li>
                <a href="#">微信</a>
            </li>
            <li class="am-active">文字回复设置</li>
        </ol>
        <div class="tpl-portlet-components">

            <div class="portlet-title">
                <div class="caption font-green bold">
                    <span class="am-icon-code"></span> 明细
                </div>
            </div>

            <div class="tpl-block">
                <div class="am-g">
                    <div class="tpl-form-body tpl-form-line">
                        <form class="am-form tpl-form-line-form" data-am-validator id="news_content_form">
                                <div class="am-panel-group" id="accordion">
                                    <div class="am-panel am-panel-default">
                                        <div class="am-panel-hd">
                                            <h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#reply_rule_'}">
                                                添加回复规则
                                            </h4>
                                        </div>
                                        <div id="reply_rule_" class="am-panel-collapse am-collapse am-in">
                                            <div class="am-panel-bd">
                                               
                                                <div class="am-form-group">
                                                        <label for="user-name" class="am-u-sm-2 am-form-label">规则名称<span
                                                                class="tpl-form-line-small-title" style="color:red">*</span></label>
                                                        <div class="am-u-sm-10">
                                                            <input type="text" class="tpl-form-input" id="rule_name" name="rule_name"
                                                                    placeholder="请输入规则名称" required>
                                                        </div>
                                                    </div>

                                                    <div class="am-form-group">
                                                        <label for="user-name" class="am-u-sm-2 am-form-label">关键字<span
                                                                class="tpl-form-line-small-title" style="color:red">*</span></label>
                                                        <div class="am-u-sm-10">
                                                            <input type="text" class="tpl-form-input" id="user-name" name="rule_keywords"
                                                                    placeholder="请输入关键字,多个关键字使用','隔开">
                                                        </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="am-panel am-panel-default">
                                        <div class="am-panel-hd">
                                            <h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#reply_rule1_'}">
                                                添加回复内容
                                            </h4>
                                        </div>
                                        <div id="reply_rule1_" class="am-panel-collapse am-collapse am-in">
                                            <div class="am-g">
                                                    <div class="am-u-sm-12">
                                                        <form class="am-form">
                                                            <div class="am-u-sm-12 news-body"> 
                                                                <div class="am-u-sm-5 news-topBorder" >
                                                                    <div v-for="(item,index) in contextGroup">
                                                                        <div class="news-top" v-if="index == 0">
                                                                            <img src = "__PUBLIC__/images/menu/iphone_head.png">
                                                                            <div class="news-top-title">{{item.title}}</div>
                                                                            <div class="mask">
                                                                                <a href="javascript:;" @click="editItem(item)"><i class="fa fa-edit"></i> 编辑</a>
                                                                                <a href="javascript:;" @click="removeItem(item)"><i class="fa fa-times"></i> 删除</a>
                                                                            </div>
                                                                        </div>
                                                                        <div class="news-add" v-if="index != 0">
                                                                            <div class="news-subcontent">
                                                                                <div class="am-u-sm-6 am-g-collapse news-subtitle">
                                                                                <h4>{{item.title}}</h4>
                                                                                </div>
                                                                                <div class="am-u-sm-6 am-u-end news-subtitle-img">
                                                                                    <img src="../../Uploads/2018-03-28/{0BC2ACE2-0746-4551-9F3F-22EB461F69C3}.jpg">
                                                                                </div>
                                                                                <div class="mask am-u-sm-12">
                                                                                    <a href="javascript:;" @click="editItem(item)"><i class="fa fa-edit"></i> 编辑</a>
                                                                                    <a href="javascript:;" @click="removeItem(item)"><i class="fa fa-times"></i> 删除</a>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="news-footer" v-show="contextGroup.length < 8">
                                                                        <div class="am-vertical-align-middle addbtn" @click="addItem">
                                                                            <span><i class="am-icon-plus"></i> 添加</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                
                                                            <div class="am-u-sm-7 am-u-end am-margin-top news-contents">
                                                                <div class="am-form-group">
                                                                    <label for="title" class="am-u-sm-2 am-form-label">标题<span class="tpl-form-line-small-title" style="color:red">*</span></label>
                                                                    <div class="am-u-sm-10 content-group">
                                                                        <input type="text" class="tpl-form-input" id="title" name="title" v-model="activeItem.title" maxlength="50"  placeholder="请输入标题" required>
                                                                        <div class="am-alert am-alert-danger" hidden></div>
                                                                    </div>
                                                                </div>
                                                                <div class="am-form-group">
                                                                    <label for="author" class="am-u-sm-2 am-form-label">作者<span class="tpl-form-line-small-title" style="color:red">*</span></label>
                                                                    <div class="am-u-sm-10 content-group">
                                                                        <input type="text" class="tpl-form-input" id="author" name="author" v-model="activeItem.author" placeholder="请输入作者" required>
                                                                        <div class="am-alert am-alert-danger" hidden></div>
                                                                    </div>
                                                                </div>
                                                                <div class="am-form-group">
                                                                    <label for="displayorder" class="am-u-sm-2 am-form-label">排序<span class="tpl-form-line-small-title" style="color:red">*</span></label>
                                                                    <div class="am-u-sm-10 content-group">
                                                                        <input type="text" class="tpl-form-input" id="displayorder" v-model="activeItem.displayorder" onkeyup="this.value=this.value.replace(/\D/g,'')" name="displayorder"  placeholder="排序只能在提交后显示。按照从大到小的顺序对图文排序" required>
                                                                        <div class="am-alert am-alert-danger" hidden></div>
                                                                    </div>
                                                                </div>
                                                                <div class="am-form-group">
                                                                    <label for="upload_img" class="am-u-sm-2 am-form-label">封面<span class="tpl-form-line-small-title" style="color:red">*</span></label>
                                                                    <div class="am-u-sm-10 content-group">
                                                                        <img id="upload_img" max-width="360" max-height="200" width="180" height="100" src="__PUBLIC__/assets/img/upload.png" @click="select_images">

                                                                        <div>
                                                                            封面（大图片建议尺寸：360像素 * 200像素）
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="am-form-group">
                                                                    <label class="am-u-sm-2 am-form-label">描述</label>
                                                                    <div class="am-u-sm-10 content-group">
                                                                        <textarea class="tpl-form-input" rows="2" id="description" name="description" v-model="activeItem.description" placeholder="请输入描述"></textarea>
                                                                    </div>
                                                                </div>
                                                                <div class="am-form-group">
                                                                    <label class="am-u-sm-2 am-form-label">显示详情</label>
                                                                    <div class="am-u-sm-10 content-group">
                                                                        <div class="tpl-switch">
                                                                            <input type="checkbox" class="ios-switch bigswitch tpl-switch-btn" checked />
                                                                            <div class="tpl-switch-btn-view">
                                                                                <div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        
                                                                    </div>
                                                                </div>
                                                                <div class="am-form-group">
                                                                    <label for="content" class="am-u-sm-2 am-form-label">详情<span class="tpl-form-line-small-title" style="color:red">*</span></label>
                                                                    <div class="am-u-sm-10 content-group">
                                                                        <div class="am-validate" name="content" id="content" v-model="activeItem.content"></div>
                                                                        
                                                                    </div>
                                                                </div>
                                                                <div class="am-form-group">
                                                                    <label for="url" class="am-u-sm-2 am-form-label">来源<span class="tpl-form-line-small-title" style="color:red">*</span></label>
                                                                    <div class="am-u-sm-10 content-group">
                                                                        <input type="text" class="tpl-form-input" id="rul" name="url" v-model="activeItem.url" placeholder="图文消息的来源地址">
                                                                        <div class="am-alert am-alert-danger" hidden></div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        </form>
                                                    </div>
                                    
                                                </div>
                                        </div>
                                    </div>
                                </div>


                            <div class="am-form-group">
                                <div class="am-u-sm-10 am-u-sm-push-3">
                                    <button type="button" @click="submit"
                                            class="am-btn am-btn-primary tpl-btn-bg-color-success ">提交
                                    </button>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>

            </div>

        </div>

        <div class="am-modal am-modal-no-btn" tabindex="-1" id="select_img">

            <div data-am-widget="tabs" class="am-tabs am-tabs-d2 am-modal-dialog">
                <ul class="am-tabs-nav am-cf">
                    <li class="am-active">
                        <a href="[data-tab-panel-0]">永久素材</a>
                    </li>
                    <li class="">
                        <a href="[data-tab-panel-1]">临时素材</a>
                    </li>
                    <li class="">
                        <a href="[data-tab-panel-2]">历史</a>
                    </li>
                </ul>
                <div class="am-tabs-bd">
                    <div data-tab-panel-0 class="am-tab-panel am-active">
                        <div id="upload_perpetual"></div>
                    </div>
                    <div data-tab-panel-1 class="am-tab-panel ">
                        <img src="__PUBLIC__/assets/img/upload.png"
                             style="display: block;margin-top: 10px;margin-right: auto;margin-bottom: 10px;margin-left: auto;"/>
                    </div>
                    <div data-tab-panel-2 class="am-tab-panel ">
                        【歌唱】那时候有多好，任雨打湿裙角。忍不住哼起，心爱的旋律。绿油油的树叶，自由地在说笑。燕子忙归巢，风铃在舞蹈。经过青春的草地，彩虹忽然升起。即使视线渐渐模糊，它也在我心里。就像爱过的旋律，没人能抹去。因为生命存在失望，歌唱，所以才要歌唱。
                    </div>
                </div>
            </div>
        </div>

        <div class="tpl-alert"></div>
        <include file="./Public/common/htm/pop_win.html"/>

    </div>
</div>

</body>


<script src="__PUBLIC__/assets/js/jquery.min.js"></script>
<script src="__PUBLIC__/assets/js/amazeui.min.js"></script>
<script src="__PUBLIC__/assets/js/app.js"></script>
<script src="__PUBLIC__/assets/js/underscore-min.js"></script>
<script src="__PUBLIC__/vue.js"></script>
<script src="__PUBLIC__/uploadify/jquery.uploadify.min.js"></script>
<script src="__PUBLIC__/dist/amazeui.upload.js"></script>
<script src="__PUBLIC__/dist/amazeui.upload.template.js"></script>
<script src="__PUBLIC__/dist/amazeui.upload.event.js"></script>
<script src="__PUBLIC__/assets/UEditor/ueditor.config.js"></script>
<script src="__PUBLIC__/assets/UEditor/ueditor.all.min.js"></script>
<script src="__PUBLIC__/assets/UEditor/lang/zh-cn/zh-cn.js"></script>
<script>
    var vm = new Vue({
        el: '#news_detail',
        data: {
            contextGroup : [],
            removeGroup : [],
            activeItem:{},
            activeItemIndex:0,
            wx_mid: -1,
        },
        methods: {
            initObject : function(){

                if(!$.isArray(vm.contextGroup)){
                    vm.contextGroup = [];
                }
                if(vm.contextGroup.length == 0) {
                    
                    vm.contextGroup.push(
                        {
                             rule_id   : ''
                            ,parent_id : -1
                            ,title     : ''
                            ,author    : ''
                            ,description:''
                            ,thumb     : ''
                            ,content   : ''
                            ,displayorder:'0'
                            ,incontent : true
                            ,detailShow:false
                            ,url       : ''
                        }
                    );
                }
                vm.activeItemIndex = 0;
                vm.activeItem = vm.contextGroup[vm.activeItemIndex];

            },
            addItem : function() {
                vm.contextGroup.push(
                        {
                             rule_id   : ''
                            ,parent_id : -1
                            ,title     : ''
                            ,author    : ''
                            ,description:''
                            ,thumb     : ''
                            ,content   : ''
                            ,displayorder:'0'
                            ,incontent : true
                            ,detailShow:false
                        }
                    );
                vm.activeItemIndex = vm.contextGroup.length -1;
                vm.activeItem = vm.contextGroup[vm.activeItemIndex];
            },
            removeItem : function(item) {
                if (vm.contextGroup.length == 1) {
                    $("#pop_win").find("#tip_index").html('操作提示');
                    $("#pop_win").find("#tip_content").html('至少保留一条图文信息!');
                    $("#pop_win").modal();
                } else {

                    vm.contextGroup = _.without(vm.contextGroup,item);
                    vm.activeItemIndex = 0;
                    vm.activeItem = vm.contextGroup[vm.activeItemIndex];
                }

            },
            editItem : function(item) {
                debugger;
                var index = $.inArray(item,vm.contextGroup);
                if(index == -1) return false;
                vm.activeItemIndex = index;
                vm.activeItem = vm.contextGroup[vm.activeItemIndex];
            },          
            select_images: function () {
                $('#select_img').modal({});
                $(function () {
                    $('#upload_perpetual').AmazeuiUpload({
                        url: '../../Upload/Upload/uploadImageFile',
                        callback: function (data) {
                            vm.upload_perpetual(data);
                        }
                    })
                    ;
                });

            },
            submit: function (data) {
                $.ajax({
                    type: 'post',
                    url: '../ImageReplyApi/add_img_rule',
                    dataType: 'json',
                    data: $('#basic_info_form').serialize(),
                    success: function (data) {
                        if (data.stateCode == 200) {
                            $("#pop_win").find("#tip_index").html('操作提示');
                            $("#pop_win").find("#tip_content").html(data.message);
                            $("#pop_win").modal();
                        }
                    },
                    error: function (data) {
                        console.log('error');
                    }
                })
            },
            keywordsValidate: function (keywords) {
                var result = '';
                $.ajax({
                    type: 'post',
                    url: '../../Validation/Validation/replyKeyWords',
                    dataType: 'json',
                    async: false,
                    data: {'rule_keywords': keywords},
                    success: function (data) {
                        if (data.stateCode == 200) {
                            result = data.message;
                        } else {
                            result = data.message;
                        }
                    },
                    error: function (data) {
                        console.log('error');
                    }
                })

                return result;
            }
        }
    })

$(document).ready(function(){
    var editor = UE.getEditor('content');
    editor.addListener('contentChange', function() {
        var value = editor.getContent().replace(/\&quot\;/g, '"');
        vm.activeItem.content = value;
    });
    vm.initObject();
  

});
</script>


</html>